<template>
    <el-dialog v-model="isOpen" title="离散程度分析结果" :border="true" align-center>
        <el-descriptions column="1" border label-width="100px">
            <el-descriptions-item label="标准差">{{ result.standardDeviation.toFixed(3) }}</el-descriptions-item>
            <el-descriptions-item label="方差">{{ result.variance.toFixed(3) }}</el-descriptions-item>
            <el-descriptions-item label="极差">{{ result.range.toFixed(3) }}</el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <div ref="chartContainer" style="width: 100%;height: 400px" />

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="isOpen = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

let isOpen = defineModel()
let props  = defineProps([ "originalData", "result" ])

let chartContainer = ref(null)
let chartInstance  = ref(null)

watch(isOpen, (val) => {
    if(val){
        initChart()
    }
})

function initChart(){
    nextTick(() => {
        if(!chartContainer.value){
            return
        }
        if(!props.originalData){
            return
        }
        if(!props.result){
            return
        }

        if(!chartInstance.value){
            chartInstance.value = echarts.init(chartContainer.value)
        }

        // 准备数据
        let sortedData = [ ...props.originalData ].sort((a, b) => a - b)
        let meanValue  = sortedData.reduce((sum, val) => sum + val, 0) / sortedData.length
        let lowerBound = meanValue - props.result.standardDeviation
        let upperBound = meanValue + props.result.standardDeviation

        const option = {
            grid      : {
                left        : "10%",
                right       : "10%",
                bottom      : "20%",
                top         : "10%",
                containLabel: true,
            },
            xAxis     : {
                type: "value",
                name: "数值",
                min : Math.min(...sortedData),
                max : Math.max(...sortedData),
            },
            yAxis     : {
                type: "value",
                show: false,
                min : 0.5,
                max : 1.5,
            },
            series    : [
                // 原始数据点
                {
                    type      : "scatter",
                    symbolSize: 12,
                    data      : sortedData.map(value => [ value, 1 ]),
                    z         : 4,
                    label     : {
                        show     : true,
                        position : "top",
                        formatter: params => params.value[0],
                    },
                },
                // 均值线
                {
                    type     : "line",
                    name     : "meanLine",
                    data     : [
                        [ meanValue, 0.5 ],
                        [ meanValue, 1.5 ],
                    ],
                    lineStyle: {
                        color: "#2ecc71",
                        width: 2,
                    },
                    symbol   : "none",
                    z        : 1,
                },
                // 标准差范围（区域填充）
                {
                    type     : "line",
                    name     : "stdRange",
                    data     : [
                        [ lowerBound, 0.5 ],
                        [ lowerBound, 1.5 ],
                        [ upperBound, 1.5 ],
                        [ upperBound, 0.5 ],
                        [ lowerBound, 0.5 ],
                    ],
                    lineStyle: {
                        color: "#f39c12",
                        type : "dashed",
                        width: 2,
                    },
                    areaStyle: {
                        color: "rgba(243, 156, 18, 0.1)",
                    },
                    symbol   : "none",
                    z        : 2,
                },
                // 极差范围（上下限）
                {
                    type     : "line",
                    name     : "rangeLine",
                    data     : [
                        [ sortedData[0], 0.5 ],
                        [ sortedData[0], 1.5 ],
                        [ sortedData[sortedData.length - 1], 1.5 ],
                        [ sortedData[sortedData.length - 1], 0.5 ],
                    ],
                    lineStyle: {
                        color: "#9b59b6",
                        width: 1.5,
                    },
                    symbol   : "none",
                    z        : 1,
                },
            ],
            annotation: {
                label    : {
                    fontSize: 12,
                    color   : "#333",
                },
                itemStyle: {
                    color: "transparent",
                },
                data     : [
                    {
                        name            : "stdLabel",
                        type            : "text",
                        coordinateSystem: "xAxis",
                        value           : `标准差: ${ props.result.standardDeviation.toFixed(2) }`,
                        x               : upperBound,
                        y               : "bottom",
                        offset          : [ 0, 10 ],
                        align           : "right",
                    },
                    {
                        name            : "varianceLabel",
                        type            : "text",
                        coordinateSystem: "xAxis",
                        value           : `方差: ${ props.result.variance.toFixed(2) }`,
                        x               : upperBound,
                        y               : "bottom",
                        offset          : [ 0, 30 ],
                        align           : "right",
                    },
                    {
                        name            : "rangeLabel",
                        type            : "text",
                        coordinateSystem: "xAxis",
                        value           : `极差: ${ props.result.range }`,
                        x               : (sortedData[0] + sortedData[sortedData.length - 1]) / 2,
                        y               : "bottom",
                        offset          : [ 0, 50 ],
                        align           : "center",
                    },
                ],
            },
        }

        chartInstance.value.setOption(option)

        window.onresize = function(){
            chartInstance.value.resize()
        }
    })
}
</script>

<style lang="scss" scoped>
</style>
